import React, { Component } from 'react';
import { Tabs, Row, Col, Card, Button, Table, Tooltip, message, Icon } from 'antd';
import { handlerApprovalStatusColor } from '@/utils/publicFunction';
import _ from 'lodash';
import moment from 'moment';
import router from 'umi/router';

const { TabPane } = Tabs;
class ProjectTable extends Component {
  state = {
    underwayColumns: [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width: 20,
        align: 'center',
      },
      {
        title: '项目分期',
        dataIndex: 'stageName',
        key: 'stageName',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '业务类型',
        dataIndex: 'businessType',
        key: 'businessType',
        width: 40,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '版本',
        dataIndex: 'version',
        key: 'version',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '版本状态',
        dataIndex: 'versionStatus',
        key: 'versionStatus',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              <i className="dots" style={{ background: handlerApprovalStatusColor(text) }} />
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '最新更新时间',
        dataIndex: 'updateTime',
        key: 'updateTime',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={moment(text).format('YYYY-MM-DD HH:mm:ss')}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {moment(text).format('YYYY-MM-DD HH:mm:ss')}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '创建人',
        dataIndex: 'createBy',
        key: 'createBy',
        width: 40,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '待进行事项',
        dataIndex: 'toDoDetail',
        key: 'toDoDetail',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        align: 'center',
        width: 30,
        render: (text, record) => (
          <Button
            type="link"
            onClick={() => {
              window.open(record.url);
            }}
          >
            查看
          </Button>
        ),
      },
    ],
    remindColumns: [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width: 25,
        align: 'center',
      },
      {
        title: '项目分期',
        dataIndex: 'projectStages',
        key: 'projectStages',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '待办类型',
        dataIndex: 'todoTypeName',
        key: 'todoTypeName',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '待办说明',
        dataIndex: 'content',
        key: 'content',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '负责人',
        dataIndex: 'taskApproveName',
        key: 'taskApproveName',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '创建时间',
        dataIndex: 'flowStartDate',
        key: 'flowStartDate',
        width: 100,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '处理人',
        dataIndex: 'handlePersonName',
        key: 'handlePersonName',
        width: 60,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '处理时间',
        dataIndex: 'handleTime',
        key: 'handleTime',
        width: 100,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '状态',
        dataIndex: 'todoStatusName',
        key: 'todoStatusName',
        align: 'center',
        width: 50,
      },
      {
        title: '操作',
        dataIndex: 'todoStatus',
        key: 'todoStatus',
        align: 'center',
        width: 40,
        render: (text, record) => (
          <Button
            type="link"
            onClick={() => {
              if (record.pcTaskUrl) {
                window.open(record.pcTaskUrl);
              } else {
                message.warning(`跳转路径错误${record.pcTaskUrl}`);
              }
            }}
          >
            {text === '0' ? '去处理' : '查看'}
          </Button>
        ),
      },
    ],
    dynamicColumns: [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width: 25,
        align: 'center',
      },
      {
        title: '项目分期',
        dataIndex: 'projectStages',
        key: 'projectStages',
        width: 120,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '事件',
        dataIndex: 'event',
        key: 'event',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '业务类型',
        dataIndex: 'moduleTypeName',
        key: 'moduleTypeName',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '版本名称',
        dataIndex: 'versionName',
        key: 'versionName',
        width: 120,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: (
          <>
            <div>操作前</div>
            <div>版本状态</div>
          </>
        ),
        dataIndex: 'beforeState',
        key: 'beforeState',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: (
          <>
            <div>操作后</div>
            <div>版本状态</div>
          </>
        ),
        dataIndex: 'afterStateValue',
        key: 'afterStateValue',
        align: 'center',
        width: 70,
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '操作人',
        dataIndex: 'usercn',
        key: 'usercn',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 100,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
    ],
  };

  // 点击查看全部
  handleJumpDetail = key => {
    router.push({
      pathname: '/Workbench/projectWorkbench/detail',
      query: {
        tabKey: key,
        projectName: this.props.location.query.projectName,
        projectId: this.props.location.query.projectId,
      },
    });
  };

  render() {
    const {
      remindItems,
      dynamicItems,
      projectUnderwayList,
      loading1,
      loading2,
      loading3,
    } = this.props;
    return (
      <Row className="table-content">
        <Col style={{ marginBottom: '10px' }}>
          <Card>
            <Tabs defaultActiveKey="1" size="small">
              <TabPane tab="正在进行" key="1">
                <Table
                  rowKey="index"
                  columns={this.state.underwayColumns}
                  bordered
                  size="middle"
                  dataSource={projectUnderwayList}
                  loading={loading1}
                  scroll={{ y: '1300' }}
                  pagination={false}
                />
              </TabPane>
            </Tabs>
          </Card>
        </Col>
        <Col style={{ marginBottom: '10px' }}>
          <Card>
            <Tabs
              defaultActiveKey="1"
              tabBarExtraContent={
                <Button
                  type="link"
                  onClick={() => this.handleJumpDetail('remind')}
                  disabled={_.isEmpty(remindItems.list)}
                >
                  <p>
                    查看全部&nbsp;
                    <Icon type="double-right" />
                  </p>
                </Button>
              }
            >
              <TabPane tab="待办提醒" key="1" size="small">
                <Table
                  rowKey="index"
                  columns={this.state.remindColumns}
                  bordered
                  size="middle"
                  dataSource={remindItems.list}
                  loading={loading2}
                  scroll={{ y: '1300' }}
                  pagination={false}
                />
              </TabPane>
            </Tabs>
          </Card>
        </Col>
        <Col>
          <Card>
            <Tabs
              defaultActiveKey="1"
              tabBarExtraContent={
                <Button
                  type="link"
                  onClick={() => this.handleJumpDetail('dynamic')}
                  disabled={_.isEmpty(dynamicItems.list)}
                >
                  <p>
                    查看全部&nbsp;
                    <Icon type="double-right" />
                  </p>
                </Button>
              }
            >
              <TabPane tab="最新动态" key="1" size="small">
                <Table
                  rowKey="index"
                  columns={this.state.dynamicColumns}
                  bordered
                  size="middle"
                  dataSource={dynamicItems.list}
                  loading={loading3}
                  scroll={{ y: '1300' }}
                  pagination={false}
                />
              </TabPane>
            </Tabs>
          </Card>
        </Col>
      </Row>
    );
  }
}

export default ProjectTable;
